
<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom4" style="height: 150px; margin-top: 30px; width: 100%;"></div>
    </div>
</template>
<script>
import { Bar } from '@antv/g2plot';
// import Title from './Title.vue'; 

export default {
    data() {
        return {
            title: '监测视频',
            chartData: [
                { name: '昆山学院路浦东软件园市政工程', value: 3 },
                { name: '太原理工大学一号教学楼工程', value:4 },
                { name: '中北大学实验楼项目', value: 3},
                { name: '兰州理工大学图书馆工程', value:1},
                { name: '测试监测点', value:2 },
                { name: '一号重点工程', value: 1 }
            ],
            barChart: null 
        }
    },
    methods: {
        loadBar() {
            // 创建水平条形图实例
            this.barChart = new Bar(this.$refs.bottom4, {
                data: this.chartData,
                 // 横轴为数值
                xField: 'value',
                 // 纵轴为项目名称
                yField: 'name',
                seriesField:"name",
                label: {
                    // 数值标签在右侧
                    position: 'right', 
                    style: {
                        fill: 'white',
                        fontSize: 12,
                        fontWeight: 'bold'
                    }
                },
                xAxis: {
                    max: 5, 
                    label: {
                        style: {
                            fill: 'white',
                            fontSize: 12
                        }
                    },
                    grid: {
                        style: {
                            stroke: 'rgba(255, 255, 255, 0.1)' 
                        }
                    }
                },
                yAxis: {
                    label: {
                        autoEllipsis:true,
                        style: {
                            fill: 'white',
                            fontSize: 12,
                            fontWeight: '500'
                        }
                    },
                    // 隐藏纵轴网格线
                    grid: false 
                },
                legend:false,
                tooltip: {
                    formatter: (datum) => {
                        return {
                            name: datum.name,
                            value: `监测数量: ${datum.value}`
                        };
                    },
                    domStyles: {
                        'g2-tooltip': {
                            background: '#147',
                            border: 'none',
                            borderRadius: '4px',
                            color: 'white',
                            fontSize: '14px'
                        }
                    }
                },
                interactions: [{ type: 'element-active' }], 
                animation: {
                    appear: {
                        animation: 'fade-in',
                        duration: 1000
                    }
                }
            });

            this.barChart.render();
        }
    },
    mounted() {
        this.loadBar();
    },
   
}
</script>
<style lang="less" scoped></style>
